<!--
 * @Description:
 * @Author: jiangsx
 * @Date: 2021-06-24 17:08:19
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-30 09:31:31
-->
<template>
  <!-- 账户变动审核 -->
  <div>
    <div style="display: flex">
      <!-- 时间 -->
      <div class="block">
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </div>

      <!-- 查询栏 -->
      <div>
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          style="display: flex; margin-left: 11px"
        >
          <el-form-item>
            <el-select
              v-model="formInline.applyType"
              placeholder="请选择类型"
              clearable
            >
              <el-option label="提现" value="提现" />
              <el-option label="充值" value="充值" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="formInline.status"
              placeholder="请选择状态"
              clearable
            >
              <el-option label="通过" value="通过" />
              <el-option label="不通过" value="不通过" />
              <el-option label="未审核" value="未审核" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formInline.userId" placeholder="申请人编号" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="userId" label="申请人编号" align="center" />
        <el-table-column
          prop="applyTime"
          label="申请时间"
          align="center"
          :formatter="dateFormat"
        />
        <el-table-column prop="applyType" label="变更类型" align="center" />
        <el-table-column prop="money" label="变更资金" align="center">
          <template slot-scope="scope">
            <div class="cell">
              ￥
              <span class="red_info_money">{{ scope.row.money }}</span>
              元
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="变更原因" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <div class="cell">
              <span
                v-if="scope.row.status === '未审核'"
                class="el-tag el-tag--info el-tag--mini el-tag--light"
                >未审核</span
              >
              <span
                v-else-if="scope.row.status === '通过'"
                class="el-tag el-tag--success el-tag--mini el-tag--light"
                >通过</span
              >
              <span
                v-else
                class="el-tag el-tag--danger el-tag--mini el-tag--light"
                >不通过</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="操作" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status === '未审核'" class="cell">
              <a
                type="text"
                size="small"
                class="blue_info"
                @click="pass(scope.row)"
                >通过</a
              >
              <a
                type="text"
                size="small"
                class="red_info"
                @click="unpass(scope.row)"
                >不通过</a
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="block" style="float: right">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[10, 2, 5, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  checkNoPass,
  checkPass,
  pageQueryAccountApply,
  revokeAccountApply,
  submitCertificationApply,
} from "@/api/accountApply";
import moment from "moment";
export default {
  data() {
    return {
      tableData: [],
      formInline: {
        status: "",
        applyType: "",
        userId: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      params: {
        page: 1,
        pageSize: 10,
        total: 20,
      },
      value2: "",
    };
  },
  created() {
    this.queryData();
  },
  methods: {
    // 审核
    async pass(a) {
      await checkPass({ id: a.id });
      const res = await pageQueryAccountApply({
        page: this.params.page,
        pageSize: this.params.pageSize,
      });

      this.params.page = res.data.page;
      this.params.pageSize = res.data.pageSize;
      this.tableData = res.data.list;
    },
    async unpass(a) {
      await checkNoPass({ id: a.id, reason: a.reason });
      const res = await pageQueryAccountApply({
        page: this.params.page,
        pageSize: this.params.pageSize,
      });

      this.params.page = res.data.page;
      this.params.pageSize = res.data.pageSize;
      this.tableData = res.data.list;
    },

    // 查询
    async onSubmit() {
      for (const key in this.formInline) {
        if (!this.formInline[key]) {
          delete this.formInline[key];
        }
      }
      const res = await pageQueryAccountApply({
        page: this.params.page,
        pageSize: this.params.total,
        ...this.formInline,
      });
      this.params.total = res.data.total;
      this.tableData = res.data.list;
    },

    // 分页
    async handleSizeChange(val) {
      const res = await pageQueryAccountApply({
        page: 1,
        pageSize: val,
      });
      this.params.page = res.data.page;
      this.params.pageSize = res.data.pageSize;
      this.tableData = res.data.list;
    },

    async handleCurrentChange(val) {
      const res = await pageQueryAccountApply({
        page: val,
        pageSize: this.params.pageSize,
      });
      this.params.page = res.data.page;
      this.params.pageSize = res.data.pageSize;
      this.tableData = res.data.list;
    },
    async queryData() {
      const res = await pageQueryAccountApply({ page: 1, pageSize: 10 });

      this.params.page = res.data.page;
      this.params.pageSize = res.data.pageSize;
      this.params.total = res.data.total;
      this.tableData = res.data.list;
    },
    dateFormat(row, column) {
      // const date = new Date(row[column.property]);
      return moment(parseInt(row.applyTime)).format("YYYY/MM/DD hh:mm:ss");
    },
  },
};
</script>
<style scoped>
</style>
